<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房屋信息操作</title>
    <script src="../../res/js/jquery-3.4.1.min.js"></script>
    <script src="../../res/layui/layui.js" charset="utf-8"></script>
    <script src="../../res/js/Tools.js"></script>
    <link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
    <link href="../../res/echarts/eleTree.css" rel="stylesheet"/>
    <script src="../../res/echarts/eleTree.js"></script>
    <style type="text/css">
        body {
            padding: 10px;
        }
    </style>

</head>
<body>
<form class="layui-form layui-form-pane" action="">
    <input type="hidden" id="houseId" name="houseId">
    <div class="layui-form-item">

        <!--<div class="layui-inline">
            <label class="layui-form-label">编号</label>
            <div class="layui-input-inline">
                <input type="text" name="userId" id="userId" lay-verify="required" placeholder="请输入编号（必填）"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>-->
        <div class="layui-inline">
            <label class="layui-form-label">房源地址</label>
            <div class="layui-input-inline">
                <input type="text" name="userName" id="userName" lay-verify="required" placeholder="请输入房源地址（必填）"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">区域名称</label>
            <div class="layui-input-inline">
                <input type="text" name="sectorName" id="sectorName" placeholder="请输入区域名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">房屋价格</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="housePrice" id="housePrice" lay-verify="required" placeholder="￥（必填）"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">手机</label>
            <div class="layui-input-inline">
                <input type="tel" name="housePhone" id="housePhone" lay-verify="required|phone" placeholder="请输入手机（必填）"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">房屋面积</label>
            <div class="layui-input-inline">
                <input type="text" name="houseArea" id="houseArea" lay-verify="required" placeholder="㎡（必填）"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">录入人电话</label>
            <div class="layui-input-inline">
                <input type="text" name="createdPhone" id="createdPhone" lay-verify="required|phone"
                       placeholder="请输入手机（必填）"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>


    <!--<div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea id="houseParticular" name="houseParticular" lay-verify="conten" style="display: none;"></textarea>
        </div>
    </div>-->
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea id="houseParticular" name="houseParticular" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>

    <!--<div class="layui-form-item">
        <label class="layui-form-label">房源图片</label>
        <div>

        </div>


        <div>
            &lt;!&ndash;<div>
                <div>
                    <a class="layui-btn layui-btn-danger">删除</a>
                </div>
                <img src="../../res/images/20200618213725.png"/>
                <input name="file" type="hidden"/>
            </div>&ndash;&gt;
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                <legend>房源图片</legend>
            </fieldset>
            <div id="houseImg">
                &lt;!&ndash;<div>
                    <a class="layui-btn layui-btn-danger" onclick="deleteImg()">删除</a>
                </div>
                <img src="../../res/images/20200618213725.png"/>
                <input name="file" type="hidden"/>
                <hr>&ndash;&gt;
            </div>
        </div>
    </div>-->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="sub">立即提交</button>
        </div>
    </div>
</form>
<script>
    var clients;
    // 修改赋值
    var houseId = getQueryString("houseId");
    layui.use(['form', 'layedit', 'laydate', 'layer', 'upload', 'flow'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , upload = layui.upload
            , flow = layui.flow;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });
        //设置文本域
        //layedit = layui.layedit, $ = layui.jquery;
        /*var index = layedit.build('houseParticular', {
            tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', 'link', 'unlink', 'face'],//设置需要的控件
            height: 260 //设置高度
        });*/

        flow.lazyimg({
            elem: '#LAY_demo3 img'
            , scrollElem: '#LAY_demo3' //一般不用设置，此处只是演示需要。
        });

        /*        //加载组件
                layui.config({
                    base: '../../res/echarts/'
                }).extend({
                    xmSelect: 'xm-select'
                }).use(['xmSelect'], function () {
                    var xmSelect = layui.xmSelect;
                    var url = "../../houseOrClientAction/selectClientAll";
                    var clientData = {};
                    if (houseId) {
                        clientData = {"id": houseId};
                    }

                    $.post(url, clientData, function (obj) {
                        //渲染多选
                        clients = xmSelect.render({
                            el: '#clients',
                            data: obj
                        })
                    }, "json")


                });*/

        //多图片上传
        upload.render({
            elem: '#imgs'
            , url: '../../clientAction/uploadNew' //改成您自己的上传接口
            , multiple: true
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#img').append('<img  src="' + result + '" class="layui-upload-img">');

                });
                console.info(obj);
            }
            , done: function (res) {
                //上传完毕
                $("#clientImg").append('<input type="hidden" value="' + res.data.src + '" name="clientImg" />');
                console.info(res);
            }
        });

        $("#userName").on("blur",function () {
            var houseArea=$("#userName").val();
            var url="../../houseAction/findHouseArea";
            var data={
                houseArea:houseArea
            };
            $.post(url,data,function (res) {
                if(res>0){
                    layer.alert('该地址已存在不可重复添加', {
                        icon: 2,
                        skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                    });
                    $("#userName").val("");
                }
            },"json")


        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            var url = "../../houseAction/addOrUpdate";
            var selectArr = $("input[name=clientImg]");

            var clientImg = [];
            $.each(selectArr, function (index, item) {
                clientImg.push(item.value);
            });
            data.field.clientImg = clientImg;
            $.post(url, data.field, function (obj) {
                if (obj.num == 1) {
                    window.parent.location.reload();//刷新父页面
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                }
            }, "json");
            return false;
        });


        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
            alert(JSON.stringify(data));
        });

        if (houseId) {
            $("#houseId").val(houseId);
            var url = "../../houseAction/findById";
            var data = {"houseId": houseId};
            $.post(url, data, function (obj) {
                $("#userName").val(obj.userName);             // 房源地址
                $("#userId").val(obj.userId);                   // 编号
                $("#housePrice").val(obj.housePrice);           // 房屋价格
                $("#housePhone").val(obj.housePhone);           // 联系电话
                $("#createdPhone").val(obj.createdPhone);           // 联系电话
                $("#sectorName").val(obj.sectorName);               // 区域名称
                $("#houseArea").val(obj.houseArea);             // 面积
                $("#houseParticular").val(obj.houseParticular);             // 备注
                //layedit.setContent(index, obj.houseParticular);     // 备注
                form.render();
            }, "json");

            //查询关联图片
            var url = "../../houseAction/selectImg";
            var data = {imgType: 0, houseId: houseId};
            $.post(url, data, function (obj) {
                $.each(obj, function (index, item) {
                    $("#houseImg").append('<div id="' + item.imgId + '"><div><a class="layui-btn layui-btn-danger" onclick="deleteImg(\'' + item.imgId + '\')">删除</a></div><a href="javascript:img(\''+item.imgUrl+'\')"><img src="' + item.imgUrl + '" width="300px" height="300px" /></a><input name="clientImg" type="hidden" value="' + item.imgUrl + '" /></div><hr>');
                })
            }, "json");

        } else {
            $("#houseImg").remove();
        }

        // 查看
        var show = getQueryString("show");
        if (show) {
            $("#sub").hide();
        }

        /*form.verify({
            conten: function (value) {
                return layedit.sync(index);
            }
        });*/
        form.render();
    });
</script>

<script type="text/javascript">



    /**
     * 修改日历格式
     * @param dates
     * @returns {string}
     */
    function setDate(dates) {
        var date = new Date(dates);
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var sdate = date.getFullYear() + "-"
        if (month < 10) {
            sdate += "0" + month + "-";
        } else {
            sdate += month + "-";
        }
        if (day < 10) {
            sdate += "0" + day;
        } else {
            sdate += day;
        }
        return sdate;
    }

    function deleteImg(id) {
        //询问框
        layer.confirm('是否删除', {
            btn: ['是', '否'] //按钮
        }, function () {
            $("#" + id + "").remove();
            layer.msg('删除成功', {icon: 1});
        }, function () {

        });

    }
</script>
</body>
</html>